<template>
  <el-dialog
      :visible.sync="dialogVisible"
      width="800px"
      :before-close="closeDialog"
      append-to-body
      title="更新接口"
  >


    <el-form  :label-position="labelPosition"  label-width="70px" ref="form" :model="form"  v-loading="loading">

      <el-form-item prop="interName" label="接口名称">
        <el-input size= "small" type="text"  placeholder="请输入接口名称"  v-model="form.interName"></el-input>
      </el-form-item>

      <el-form-item prop="interType" label="接口类型">
        <el-select v-model="form.interType" placeholder="请选择" @change="interTypeChange">
          <el-option
              v-for="item in interTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="codeValue" label="系统回调接口" v-if="form.interType === 'CODE'">
        <el-select v-model="form.codeValue" placeholder="请选择">
          <el-option
              v-for="item in codeInterList"
              :key="item.value"
              :label="item.description"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="url" label="URL" v-if="form.interType === 'HTTP'">
        <el-input size= "small" type="text"  placeholder="请输入URL"  v-model="form.url"></el-input>
      </el-form-item>
      <el-form-item prop="requestMethod" label="请求方法" v-if="form.interType === 'HTTP'">
        <el-select v-model="form.requestMethod" placeholder="请选择">
          <el-option
              v-for="item in requestMethods"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="contentType" label="请求参数" v-if="form.interType === 'HTTP'">
        <el-select v-model="form.contentType" placeholder="请选择">
          <el-option
              v-for="item in contentTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="exchange" label="交换器" v-if="form.interType === 'MQ'">
        <el-input size= "small" type="text"  v-model="form.exchange"></el-input>
      </el-form-item>
      <el-form-item prop="routingKey" label="路由键" v-if="form.interType === 'MQ'">
        <el-input size= "small" type="text"  v-model="form.routingKey"></el-input>
      </el-form-item>
      <el-form-item prop="param" label="参数" v-if="form.interType === 'MQ'">
        <el-input size= "small" type="textarea"  v-model="form.param"></el-input>
      </el-form-item>
      <el-form-item prop="remark" label="备注">
        <el-input size= "small" type="textarea"  v-model="form.desc"></el-input>
      </el-form-item>
    </el-form>
    <div class="btn-group">
      <el-button type="text" size="small" plain @click="closeDialog">取消</el-button>
      <el-button type="primary"  size="small" :disabled="loading" @click="submit">确定</el-button>
    </div>

  </el-dialog>

</template>

<script>

import {saveInterfaceConfig,getCodeInterList} from '@/api/workflowInterface'
import { utils } from '../processEditor/utils/common.js'

export default {
  data(){
    return {
      labelPosition:'left',
      dialogVisible: false,
      loading: false,
      form: this.defaultForm(),
      interTypes:[
        {
          value: 'HTTP',
          label: 'http接口'
        },
        {
          value: 'MQ',
          label: 'mq接口'
        },
        {
          value: 'CODE',
          label: '系统接口'
        }
      ],
      contentTypes:[
        {
          value: 'application/json',
          label: 'application/json'
        },
        {
          value: 'application/x-www-form-urlencoded',
          label: 'application/x-www-form-urlencoded'
        }
      ],
      requestMethods:[
        {
          value: 'GET',
          label: 'GET'
        },
        {
          value: 'POST',
          label: 'POST'
        },
        {
          value: 'PUT',
          label: 'PUT'
        }
      ],
      codeInterList:[],
    }
  },
  created(){
    this.queryCodeInterList();
  },
  methods:{
    async queryCodeInterList(){
      let ret = await getCodeInterList();
      this.codeInterList = ret.data;
    },
    defaultForm(){
      return {
        id:"",
        classId:"",
        interId:"",
        interType:"",
        interName:"",
        url:"",
        requestMethod:"",
        contentType:"",
        exchange:"",
        routingKey:"",
        param:"",
        codeValue:"",
        desc:""
      };
    },
    interTypeChange(row){

    },
    showDialog(row){
      this.form = utils.getCloneObj(Object.assign(this.defaultForm(),row));
      this.dialogVisible = true
    },
    closeDialog(){
      this.form = {};
      this.dialogVisible = false
      this.loading = false
    },
    submit(){
      this.$refs.form.validate(async valid => {
        if(valid){
          try{
            this.loading = true
            let res = await saveInterfaceConfig(this.form);
            if(res.status === '200'){
              this.$message.success('添加成功')
              this.closeDialog()
              this.$emit('success')
            }else{
              this.$message.error(res.msg)
              this.loading = false
            }
          }catch{
            this.loading = false
          }
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-group{
  display: flex;
  justify-content: right;
  .el-button{
    width: 50px;
  }
}
.el-form-item{
  height: 40px;
}
</style>